"use client";
import React, { useEffect, useState } from "react";
import type { MenuProps } from "antd";
import { ConfigProvider, Menu } from "antd";
import style from "./page.module.scss";
import { manageNavItems } from "@/configs/constant";
import PostManage from "@/components/PostManage";
import CourseManage from "@/components/CourseManage";
import UserManage from "@/components/UserManage";
import zhCN from "antd/locale/zh_CN";
import { TypesManage } from "@/components/TypesManage";
import { getSubjectByAdmin, getVideo } from "@/api";

const Manage: React.FC = () => {
  const [current, setCurrent] = useState("userManage");
  const [total, setTotal] = useState(0);
  const [course, setCourse] = useState([]);
  const onMenuClick: MenuProps["onClick"] = (e) => {
    setCurrent(e.key);
  };
  const getVideos = async (
    pageNum: number = 1,
    pageSize: number = 10,
    subjectName?: string
  ) => {
    const res = await getSubjectByAdmin({
      pageNum,
      pageSize,
      subjectName,
    });
    setCourse(res.data.data.records);
    setTotal(res.data.data.total);
  };
  useEffect(() => {
    getVideos();
  }, []);
  const handleChildPage = () => {
    switch (current) {
      case "userManage":
        return <UserManage />;

      case "postManage":
        return <PostManage />;

      case "courseManage":
        return (
          <CourseManage getVideos={getVideos} total={total} courses={course} />
        );
      case "typesManage":
        return <TypesManage />;
      default:
        return;
    }
  };
  return (
    <ConfigProvider locale={zhCN}>
      <div className={style["manageContainer"]}>
        <Menu
          onClick={onMenuClick}
          style={{ width: 290, height: "100vh" }}
          selectedKeys={[current]}
          items={manageNavItems}
          defaultSelectedKeys={["userManage"]}
        />
        <div className={style["rightContent"]}>{handleChildPage()}</div>
      </div>
    </ConfigProvider>
  );
};
export default Manage;
